<!DOCTYPE html>
<html lang="en" id="htmlRoot">
	<head>
		<meta charset="UTF-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
		<meta name="renderer" content="webkit" />
		<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=0" />
		<meta name="author" content="网不好 --- 975263179@qq.com" />
		<meta name="description" content="小作坊是鸡泽县瑾瑜软件开发工作室开发的产品，是一个轻量级、高构、高性能、基于Solon开发的Web系统。" />
		<meta name="keywords" content="solon TDesign TDesign-Next mybatis-flex sa-token beecp 小作坊 鸡泽 975263179@qq.com 网不好" />
		<title>%VITE_APP_TITLE%</title>
		<link rel="icon" href="/favicon.ico" />
	</head>
	<body>
		<script>
			(() => {
				var htmlRoot = document.getElementById('htmlRoot');
				var theme = window.localStorage.getItem('__APP__DARK__MODE__');
				if (htmlRoot && theme) {
					htmlRoot.setAttribute('theme-mode', theme);
					theme = htmlRoot = null;
				}
			})();
		</script>
		<div id="app">
			<style>
				html[theme-mode='dark'] .app-loading {
					background-color: #2c344a;
				}

				html[theme-mode='dark'] .app-loading .app-loading-title {
					color: rgb(255 255 255 / 85%);
				}

				body {
					font-family: -apple-system, BlinkMacSystemFont, PingFang SC, Microsoft YaHei, Arial Regular;
					font: 14px / 22px PingFang SC, Microsoft YaHei, Arial Regular;
				}

				.app-loading {
					display: flex;
					width: 100%;
					height: 100%;
					justify-content: center;
					align-items: center;
					flex-direction: column;
					background-color: #f4f7f9;
				}

				.app-loading .app-loading-wrap {
					position: absolute;
					top: 45%;
					left: 50%;
					display: flex;
					transform: translate3d(-50%, -50%, 0);
					justify-content: center;
					align-items: center;
					flex-direction: column;
				}

				.app-loading .dots {
					display: flex;
					padding: 98px;
					justify-content: center;
					align-items: center;
				}

				.app-loading .app-loading-title {
					display: flex;
					margin-top: 30px;
					font-size: 30px;
					color: rgb(0 0 0 / 85%);
					justify-content: center;
					align-items: center;
				}

				.app-loading .app-loading-logo {
					display: block;
					width: 100px;
					margin: 0 auto;
					margin-bottom: 15px;
				}

				.dot {
					position: relative;
					display: inline-block;
					width: 48px;
					height: 48px;
					margin-top: 30px;
					font-size: 32px;
					transform: rotate(45deg);
					box-sizing: border-box;
					animation: antRotate 1.2s infinite linear;
				}

				.dot i {
					position: absolute;
					display: block;
					width: 20px;
					height: 20px;
					background-color: #0065cc;
					border-radius: 100%;
					opacity: 30%;
					transform: scale(0.75);
					animation: antSpinMove 1s infinite linear alternate;
					transform-origin: 50% 50%;
				}

				.dot i:nth-child(1) {
					top: 0;
					left: 0;
				}

				.dot i:nth-child(2) {
					top: 0;
					right: 0;
					animation-delay: 0.4s;
				}

				.dot i:nth-child(3) {
					right: 0;
					bottom: 0;
					animation-delay: 0.8s;
				}

				.dot i:nth-child(4) {
					bottom: 0;
					left: 0;
					animation-delay: 1.2s;
				}
				@keyframes antRotate {
					to {
						transform: rotate(405deg);
					}
				}
				@keyframes antRotate {
					to {
						transform: rotate(405deg);
					}
				}
				@keyframes antSpinMove {
					to {
						opacity: 100%;
					}
				}
				@keyframes antSpinMove {
					to {
						opacity: 100%;
					}
				}
			</style>
			<div class="app-loading">
				<div class="app-loading-wrap">
					<img src="/logo.png" class="app-loading-logo" alt="Logo" />
					<div class="app-loading-dots">
						<span class="dot dot-spin"><i></i><i></i><i></i><i></i></span>
					</div>
					<div class="app-loading-title">%VITE_APP_TITLE%</div>
				</div>
			</div>
		</div>
		<script type="module" src="/src/main.js"></script>
	</body>
</html>
